{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@IcsocUIBundle/Resources/public/css/bootstrap.my.css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="row" style="margin:1px;">
        <div class="progress" style="height:80px">
            {#{% if show_ivr == 1 %}
                <div class="progress-bar progress-bar-info bar-text" style="width: 14%">
                    <span class="sr-only">35% Complete (success)</span>
                    <span>IVR进线数</span><br>
                    <span class="num-text" id="ivr_num">0</span>
                </div>

                <div class="progress-bar progress-bar-danger bar-text" style="width: 14%">
                    <span class="sr-only">10% Complete (danger)</span>
                    <span>IVR放弃数</span><br>
                    <span class="num-text" id="ivr_lost_num">0</span>
                </div>
            {% endif %}
                <div class="progress-bar progress-bar-purple bar-text" style="width: 11%">
                    <span class="sr-only">20% Complete (warning)</span>
                    <span>人工进线数</span><br>
                    <span class="num-text" id="in_num">0</span>
                </div>
                <div class="progress-bar progress-bar-success bar-text" style="width: 11%">
                    <span class="sr-only">35% Complete (success)</span>
                    <span>人工放弃数</span><br>
                    <span class="num-text" id="lost_num">0</span>
                </div>
                <div class="progress-bar progress-bar-yellow bar-text" style="width: 11%">
                    <span class="sr-only">20% Complete (warning)</span>
                    <span>人工放弃率</span><br>
                    <span class="num-text" id="lost_rate">0</span>
                </div>#}
                <div class="progress-bar progress-bar-pink bar-text" style="width: 20%">
                    <span class="sr-only">10% Complete (danger)</span>
                    <span>排队数</span><br>
                    <span class="num-text" id="queue">0</span>
                </div>
                <div class="progress-bar progress-bar-info bar-text" style="width: 20%">
                    <span class="sr-only">35% Complete (success)</span>
                    <span>技能组来电量</span><br>
                    <span class="num-text" id="queue_in_num">0</span>
                </div>
                <div class="progress-bar progress-bar-danger bar-text" style="width: 20%">
                    <span class="sr-only">10% Complete (danger)</span>
                    <span>接通量</span><br>
                    <span class="num-text" id="conn_num">0</span>
                </div>
                <div class="progress-bar progress-bar-purple bar-text" style="width: 20%">
                    <span class="sr-only">20% Complete (warning)</span>
                    <span>接通率</span><br>
                    <span class="num-text" id="conn_rate">0.00%</span>
                </div>
                {#{% for key,conn_num in connNums %}#}
                    {#<div class="progress-bar progress-bar-violet{{ key }} bar-text" style="width: 11%">#}
                        {#<span class="sr-only">10% Complete (danger)</span>#}
                        {#<span>{{ conn_num }}S接通率</span><br>#}
                        {#<span class="num-text" id="conn_rate{{ conn_num }}">0</span>#}
                    {#</div>#}
                {#{% endfor %}#}
        </div>
    </div>
    {% for key,que_name in separate_queues %}
        <div class="row" style="margin:1px;">
            <div class="panel panel-info">
                <div class="panel-heading">{{ que_name }}</div>
                <div class="panel-body" style="padding:0px;margin:0px;" >
                    <div class="progress" style="height:80px;margin-bottom:0px;">
                        {#{% if show_ivr == 1 %}
                            <div class="progress-bar progress-bar-info bar-text" style="width: 11%">
                                <span class="sr-only">35% Complete (success)</span>
                                <span>IVR进线数</span><br>
                                <span class="num-text" id="separate_ivr_num_{{ key }}">0</span>
                            </div>
                            <div class="progress-bar progress-bar-danger bar-text" style="width: 11%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>IVR放弃数</span><br>
                                <span class="num-text" id="separate_ivr_lost_num_{{ key }}">0</span>
                            </div>
                        {% endif %}
                            <div class="progress-bar progress-bar-purple bar-text" style="width: 11%">
                                <span class="sr-only">20% Complete (warning)</span>
                                <span>人工进线数</span><br>
                                <span class="num-text" id="separate_in_num_{{ key }}">0</span>
                            </div>
                            <div class="progress-bar progress-bar-success bar-text" style="width: 11%">
                                <span class="sr-only">35% Complete (success)</span>
                                <span>人工放弃数</span><br>
                                <span class="num-text" id="separate_lost_num_{{ key }}">0</span>
                            </div>
                            <div class="progress-bar progress-bar-yellow bar-text" style="width: 11%">
                                <span class="sr-only">20% Complete (warning)</span>
                                <span>人工放弃率</span><br>
                                <span class="num-text" id="separate_lost_rate_{{ key }}">0</span>
                            </div>#}
                            <div class="progress-bar progress-bar-pink bar-text" style="width: 11%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>排队数</span><br>
                                <span class="num-text" id="separate_queue_{{ key }}">0</span>
                            </div>
                            <div class="progress-bar progress-bar-info bar-text" style="width: 20%">
                                <span class="sr-only">35% Complete (success)</span>
                                <span>技能组来电量</span><br>
                                <span class="num-text" id="separate_queue_in_num_{{ key }}">0</span>
                            </div>
                            <div class="progress-bar progress-bar-danger bar-text" style="width: 17%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>接通量</span><br>
                                <span class="num-text" id="separate_conn_num_{{ key }}">0</span>
                            </div>
                            <div class="progress-bar progress-bar-purple bar-text" style="width: 17%">
                                <span class="sr-only">20% Complete (warning)</span>
                                <span>接通率</span><br>
                                <span class="num-text" id="separate_conn_rate__{{ key }}">0.00%</span>
                            </div>
                        {% for conn_num in connNums %}
                            <div class="progress-bar progress-bar-violet<{$key}> bar-text" style="width: 11%">
                                <span class="sr-only">10% Complete (danger)</span>
                                <span>{{ conn_num }}S接通率</span><br>
                                <span class="num-text" id="separate_conn_rate{{ conn_num }}_{{ key }}">0</span>
                            </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    <div class="row" style="margin:1px;">
        <div id="strip_monitor" class="progress" style="height:50px"></div>
    </div>
    <div class="row" style="margin-right:0px;">
        <div class="col-md-12" id="agent_monitor"></div>
    </div>
    <input type="hidden" id="monitor_type_h" value="0">
{% endblock %}
{% block footer %}
    {% stylesheets '@IcsocUIBundle/Resources/public/css/bootstrap.my.css' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .btn-text {
            margin: 1px;
            padding: 1px;
            color: #272727 !important;
            width:73px;
            height:65px;
        }
        .bar-text {
            font:  180% Arial; color:#272727 !important;
            padding-top: 10px; padding-bottom: 20px;

        }
        .num-text {
            font:  200% Arial; color:#272727 !important;
            padding-top: 10px; padding-bottom: 20px;

        }
        table{
            font-size: 12px;
        }
    </style>
    <script>
    var cache = "{{ rand }}";
    //初始化页面数据
    $(document).ready(function() {
        /**
         * 设置监控页面布局
         * @type {number}
         */
        var with_sty = Math.floor(100/$(".row > .progress").children().length);
        $.each($(".progress").children(),function(){
            $(this).css('width',with_sty+'%');
        });
        refresh_data();
        refresh_strip();
        refresh_ivr();
        separate_que_ivr();
        window.setInterval(refresh_time, 1000);
        window.setInterval(refresh_strip, 5000);
        window.setInterval(refresh_data, 10000);
        window.setInterval(refresh_ivr, 60000);
        window.setInterval(separate_que_ivr, 60000);
    });
    //动态刷新数据
    function refresh_data()
    { //每个技能组对应的坐席信息 （列表形式）
        $.ajax({
            url:'{{ path('icsoc_monitor_call_monitor_data') }}?t={{ rand }}'+'&cache='+cache+'&monitor_center=1',
            dataType:'json',
            cache:false,
            success:function(responce){
                if (!responce )
                {
                    return ;
                }
                $("#agent_monitor").children().remove();
                $.each(responce.rows,function(index,data){
                    if($("#panel_"+data.id).length > 0)
                    {
                        $.each(data.children,function(index,d){

                            $("#"+data.id+"btn_"+ d.ag_id).parent().attr('sort', d.sort);

                            if(d.type == 3)//删除
                            {
                                $("#"+data.id+"btn_"+ d.ag_id).parent().remove();
                            }
                            else if(d.type == 2)//添加
                            {
                                $("#"+data.id+"btn_"+ d.ag_id).parent().remove();
                                $("#panel_"+data.id).children(".panel-body").append(create_btn(d,data.id));
                            }
                            else if(d.type == 1)//修改
                            {
                                var _tmp = "";
                                _tmp += "<table><tbody>";
                                _tmp += "    <tr><td>" +d.ag_name+"</td></tr>";
                                _tmp += "    <tr><td>" +d.status+"</td></tr>";
                                _tmp += "    <tr><td class='secs' data='"+d.ag_sta_time+"'>" +d.status_secs+"</td></tr>";
                                _tmp += "</tbody></table>";

                                $("#"+data.id+"btn_"+d.ag_id).html(_tmp);
                                $("#"+data.id+"btn_"+d.ag_id).attr('class',"btn "+ d.style+" btn-text");
                            }
                            else
                            {
                                $("#"+data.id+"btn_"+ d.ag_id).parent().remove();
                                $("#panel_"+data.id).children(".panel-body").append(create_btn(d,data.id));
                            }
                        })
                    }
                    else
                    {
                        create_panel(data);
                    }

                    if($("#panel_"+data.id).children(".panel-body").children().length <= 0 )
                    {
                        $("#panel_"+data.id).remove();
                    }

                    var div = $('#panel_'+data.id+' .panel-body span').toArray().sort(function(a,b){
                        return parseInt($(a).attr('sort')) - parseInt($(b).attr('sort'))
                    });
                    $(div).appendTo('#panel_'+data.id+' .panel-body');
                })
            }
        });

    }
    function create_panel(data)
    {
        var _str = "";
        _str += "<div id='panel_"+data.id+"' class=\"panel panel-info\">";
        _str += "   <div class=\"panel-heading\">"+data.name+"</div>";
        _str += "       <div class=\"panel-body\" style=\"padding: 2px;\">";

        $.each(data.children,function(index,d){
            _str +=  create_btn(d,data.id);
        });
        _str += "</div></div>";

        $("#agent_monitor").append(_str);

        var div = $('#panel_'+data.id+' .panel-body span').toArray().sort(function(a,b){
            return parseInt($(a).attr('sort')) - parseInt($(b).attr('sort'))
        });
        $(div).appendTo('#panel_'+data.id+' .panel-body');
    }
    function create_btn(d,id)
    {
        var _strr = "";
        _strr += "<span sort='"+d.sort+"'><button id='"+id+"btn_"+d.ag_id+"' type=\"button\" class=\"btn "+d.style+" btn-text\">";
        _strr += "   <table><tbody>";
        _strr += "       <tr><td>" +d.ag_name+"</td></tr>";
        _strr += "       <tr><td>" +d.status+"</td></tr>";
        _strr += "       <tr><td class='secs' data='"+d.ag_sta_time+"'>" +d.status_secs+"</td></tr>";
        _strr +=  "  </tbody></table>";
        _strr += "</button></span>";

        return _strr;
    }
    function refresh_strip()
    {
        $.ajax({
            url:'{{ path('icsoc_monitor_call_strip_monitor_data') }}?monitor_center=1',
            dataType:'json',
            cache:false,
            success:function(responce){
                if (!responce )
                {
                    return ;
                }
                var tmp = '';
                $.each(responce.data,function(index,data){
                    tmp += '<div class="progress-bar '+data.style+' bar-text" style="width:'+data.rate+'">';
                    tmp +=  '<span class="sr-only">35% Complete (success) </span>';
                    tmp += '<span>'+data.num+'</span>';
                    tmp +='</div>';
                });
                $("#strip_monitor").html(tmp);
                //更新排队数
                $('#queue').text(responce.queue);

                $.each(responce.queueGroup,function(index,data){
                    $("#separate_queue_"+index).html(data);
                });
            }
        });
    }

    function refresh_ivr()
    {
        $.ajax({
            url:'{{ path('icsoc_monitor_call_ivr_monitor_data') }}?monitor_center=1',
            dataType:'json',
            cache:false,
            success:function(responce){
                if (!responce )
                {
                    return ;
                }
                $.each(responce,function(index,data){
                    $("#"+index).html(data);
                });
            }
        });
    }

    function separate_que_ivr()
    {
        $.ajax({
            url:'{{ path('icsoc_monitor_call_sparate_ivr_data') }}',
            dataType:'json',
            cache:false,
            success:function(responce){

                if (!responce)
                {
                    return ;
                }
                else
                {
                    for(var i in responce)
                    {
                        $.each(responce[i],function(index,data){
                            $("#separate_"+index+"_"+i).html(data);
                        });
                    }
                }
            }
        });

    }

    //刷新时间
    function  refresh_time()
    {
        $('.secs').each(function(){
            var secs = parseInt($(this).attr("data"));
            secs++;
            $(this).html(formate_time(secs));
            $(this).attr("data",secs);
        });
    }
    //格式化时间
    function formate_time(dur)
    {
        if(dur < 0)
        {
            return '';
        }
        else
        {
            var hour   = parseInt(dur/3600);

            dur    = dur%3600;
            var minute = parseInt(dur/60);
            var second = dur%60;
            if(hour < 10)
            {
                hour = "0"+hour;
            }
            if(minute < 10)
            {
                minute = "0"+minute;
            }
            if(second < 10)
            {
                second = "0"+second;
            }

            var format_dur = hour+":"+minute+":"+second;
            return format_dur;
        }
    }
    </script>
{% endblock %}